;
(function (doc) {
  var oItems = doc.getElementsByClassName('list-item'),
    curIdx = 0,
    oList = doc.getElementsByClassName('list')[0];

  var init = function () {
    bindEvent();
  }

  function bindEvent() {
    //写法一：循环绑定
    for (var i = 0; i < oItems.length; i++) {
      addEvent(oItems[i], 'mouseover', function () {
        oItems[curIdx].className = 'list-item';
        //this -> oItems[i]
        curIdx = Array.prototype.indexOf.call(oItems, this);
        oItems[curIdx].className += ' active';
      })
    }

    //写法二：事件代理
    addEvent(oList, 'mouseover', slide);
  }

  //写法二：事件代理
  function slide(ev) {
    var e = ev || window.event,
      tar = e.target || e.srcElement;

    oLi = getLi(tar, 'li');
    thisIdx = Array.prototype.indexOf.call(oItems, oLi);
    // 证明不是active
    if (curIdx !== thisIdx) {
      //原来的项还原类名
      oItems[curIdx].className = 'list-item';
      curIdx = thisIdx;
      oItems[curIdx].className += ' active';
    }
  }

  //写法二：事件代理
  //找到被触发的li元素
  function getLi(target, element) {
    // console.log(target.tagName.toLowerCase());
    // console.log(target.parentNode);
    while (target.tagName.toLowerCase() !== element) {
      target = target.parentNode;
    }
    return target;
  }

  init();

})(document)